<template>
  <z-modal
    title="修改密码"
    width="800px"
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="24" >
            <a-form-model-item label="用户账号" prop="username">
              <a-input placeholder="请输入用户账号" disabled v-model="form.username"  />
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="新密码" prop="newPassword">
              <a-input placeholder="请输入新密码" v-model.trim="form.newPassword"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import { mapState } from 'vuex'
export default {
  name: 'UpdatePassModal',
  mixins: [ModalFormMixin],
  components: {
  },
  data() {
    return {
      validatorRules: {
        newPassword: []
      },
      url: {
        add: '/user/updatepass',
        edit: '/user/updatepass'
      },
      newPasswordRules: [
        { required: true, message: '请输入新密码' }
      ]
    }
  },
  watch: {
    'systemConfig.passwordStrategy': {
      handler(val) {
        this.validatorRules.newPassword = [].concat(this.newPasswordRules, val)
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    ...mapState('setting', ['systemConfig'])
  },
  methods: {
    editAfter(data) {
      this.form = {}
      this.form.username = data.username
    },
    classifyIntoFormData() {
      return { ...this.form }
    }
  }
}
</script>

